<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'" :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>车辆信息</span>
                    <span></span>
                </div>

                <CarBaseInfo :form="form"></CarBaseInfo>
            </div>

            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>GPS续费信息</span>
                    <span></span>
                </div>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="到期GPS品牌:" prop="expireGpsBrand">
                            <el-input v-if="'write' == state" v-model="form.expireGpsBrand" disabled></el-input>
                            <span v-else>{{form.expireGpsBrand|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到期设备类型:" prop="expireEquipmentType">
                            <el-input v-if="'write' == state" v-model="form.expireEquipmentType" disabled></el-input>
                            <span v-else>{{form.expireEquipmentType|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到期设备编号:" prop="expireEquipmentNo">
                            <el-input v-if="'write' == state" v-model="form.expireEquipmentNo" disabled></el-input>
                            <span v-else>{{form.expireEquipmentNo|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到期SIM卡号:" prop="expireSim">
                            <el-input v-if="'write' == state" v-model="form.expireSim" disabled></el-input>
                            <span v-else>{{form.expireSim|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="安装到期时间:" prop="installExpireTime">
                            <el-input v-if="'write' == state" v-model="form.installExpireTime" disabled></el-input>
                            <span v-else>{{form.installExpireTime|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item label="是否需要续费:" prop="renewFlag"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择是否需要续费',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewFlag, callback)
                                       }:{}">
                            <el-select filterable v-if="'write' == state" v-model="form.renewFlag" clearable style="width: 100%">
                                <template v-for="dict in dict.type.gps_is_renewal">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                            <span v-else><dict-tag
                                :options="dict.type.gps_is_renewal"
                                :value="form.renewFlag"/></span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费设备类型:" prop="renewEquipmentType"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费设备类型',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewEquipmentType, callback)
                                       }:{}">
                            <el-select filterable v-if="'write' == state" v-model="form.renewEquipmentType" clearable style="width: 100%">
                                <template v-for="dict in dict.type.gps_device_type">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                            <span v-else><dict-tag
                                :options="dict.type.gps_device_type"
                                :value="form.renewEquipmentType"/></span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费设备编号:" prop="renewEquipmentNo"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费设备编号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewEquipmentNo, callback)
                                       }:{}">
                            <el-select filterable
                                @change="equipSel"
                                v-if="'write' == state" v-model="form.renewEquipmentNo" clearable style="width: 100%">
                                <template v-for="dict in simList">
                                    <el-option :label="dict.equipmentNo" :value="dict.equipmentNo" :key="dict.equipmentNo"></el-option>
                                </template>
                            </el-select>
                            <span v-else>
                                {{form.renewEquipmentNo|filterNull}}
<!--                                <dict-tag-->
<!--                                :options="dict.type.gps_device_type"-->
<!--                                :value="form.renewEquipmentNo"/>-->
                            </span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费SIM卡号:" prop="renewSim"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费SIM卡号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewSim, callback)
                                       }:{}">
                            <el-select filterable
                                @change="simSel"
                                v-if="'write' == state" v-model="form.renewSim" clearable style="width: 100%">
                                <template v-for="dict in simList">
                                    <el-option :label="dict.simNo" :value="dict.simNo" :key="dict.simNo"></el-option>
                                </template>
                            </el-select>
                            <span v-else>
                                {{form.renewSim|filterNull}}
<!--                                <dict-tag-->
<!--                                :options="dict.type.gps_device_type"-->
<!--                                :value="form.renewSim"/>-->
                            </span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费年限:" prop="renewYear"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费年限',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewYear, callback)
                                       }:{}">
                            <el-select filterable @change="renewSel" v-if="'write' == state" v-model="form.renewYear" clearable style="width: 100%">
                                <template v-for="dict in renewYearList">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
<!--                            <span v-else><dict-tag-->
<!--                                :options="dict.type.gps_device_type"-->
<!--                                :value="form.renewYear"/></span>-->
                            <span v-else>{{form.renewYear|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费费用:" prop="renewPrice"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请输入续费费用',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewPrice, callback)
                                       }:{}">
                            <el-input v-model="form.renewPrice" clearable v-if="'write' == state"
                                      @input="value=>{if(isNaN(form.renewPrice)) { form.renewPrice = '' }; if(form.renewPrice.indexOf('.')>0){form.renewPrice=form.renewPrice.slice(0,form.renewPrice.indexOf('.')+3)} form.renewPrice = form.renewPrice.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                                      placeholder="请输入续费费用"></el-input>
                            <span v-else>{{form.renewPrice|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="续费开始时间:" prop="renewStartTime"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费开始时间',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewStartTime, callback)
                                       }:{}">
                            <el-date-picker @change="startChange" v-model="form.renewStartTime" style="width: 100%"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            v-if="'write' == state" type="datetime"
                                            placeholder="请选择续费开始时间"></el-date-picker>
                            <span v-else>{{form.renewStartTime|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="GPS到期时间:" prop="renewEndTime"
                                      :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费年限',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewEndTime, callback)
                                       }:{}">

                            <el-date-picker v-model="form.renewEndTime" style="width: 100%"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            v-if="'write' == state" type="datetime"
                                            placeholder="请选择续费开始时间"></el-date-picker>
                            <span v-else>{{form.renewEndTime|filterNull}}</span>

                        </el-form-item>
                    </el-col>

                </el-row>
            </div>
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>备注</span>
                    <span></span>
                </div>
                <el-row :gutter="30">

                    <el-col :span="16">
                        <el-form-item label="备注:" prop="remark"
                                      :rules="'write' == state ? {
                                         required: 2==form.renewFlag,
                                         message: '请输入备注',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.remark, callback)
                                       }:{}">
                            <el-input v-if="'write' == state" type="textarea"
                                      v-model="form.remark" clearable maxlength="500"
                                      placeholder="请输入备注"></el-input>
                            <span v-else>{{form.remark|filterNull}}</span>
                        </el-form-item>
                    </el-col>


                </el-row>

            </div>

        </el-form>

    </div>
</template>

<script>


import moment from "moment";
import CarBaseInfo from "@/views/GPSManage/components/carBaseInfo.vue";
import {gpsSimInfo} from "@/api/gps/gpsList";

export default {
    components: {CarBaseInfo},
    dicts: ["gps_workorder_status", 'quota_rent_type', 'gps_workorder_type', 'gps_device_type', 'gps_is_renewal'],
    props:{
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed:{
        form:{
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },

    },
    watch: {
        form:{
            immediate:true,
            deep:true,
            handler(val){
                if(this.firstEnter && val && val.carId){
                    this.firstEnter = false
                    this.getSim()
                }
            }
        }
    },
    data() {
        return {
            firstEnter:true,
            renewYearList:[{
                label:"1年",
                value:1
            },{
                label:"2年",
                value:2
            },{
                label:"3年",
                value:3
            },{
                label:"4年",
                value:4
            },{
                label:"5年",
                value:5
            }],
            simList:[]
        };
    },
    mounted() {
        // this.form.equipmentType = '3'
        // this.form.wiredCount = 1
        // this.form.wirelessCount = 1
    },
    methods: {
        equipSel(val){
            let find = this.simList.find(item=>item.equipmentNo==val);
            if(find){
                this.form.renewSim = find.simNo
            }else {
                this.form.renewSim = null
            }
        },
        simSel(val){
            let find = this.simList.find(item=>item.simNo==val);
            if(find){
                this.form.renewEquipmentNo = find.equipmentNo
            }else {
                this.form.renewEquipmentNo = null
            }
        },
        getSim(){
            gpsSimInfo({
                carId: this.form.carId
            }).then(res=>{
                // this.simList = res.data
                this.simList = res?.data[0]?.equipmentNo?.split(",")?.map((item, index) => {

                    let simList = res?.data[0]?.simNo?.split(",");

                    return {
                        simNo: simList[index],
                        equipmentNo: item,
                    }

                }) ?? []
            })

        },
        renewSel(val){
            if(this.form.renewYear && this.form.renewStartTime){
                let endtime = moment(this.form.renewStartTime, 'YYYY-MM-DD HH:mm:ss').add(this.form.renewYear, 'year').format('YYYY-MM-DD HH:mm:ss')
                this.$set(this.form, 'renewEndTime', endtime)
            }
            this.$forceUpdate()
        },
        startChange(val){
            if(this.form.renewYear && this.form.renewStartTime){
                let endtime = moment(this.form.renewStartTime, 'YYYY-MM-DD HH:mm:ss').add(this.form.renewYear, 'year').format('YYYY-MM-DD HH:mm:ss')
                this.$set(this.form, 'renewEndTime', endtime)
            }
            this.$forceUpdate()
        },


        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },


        async valid() {

            // if(this.form.carList && this.form.carList.length>0){
            //     this.form.carIds = this.form.carList.map(item=>{
            //         return item.carId
            //     })
            //     this.form.workIds = this.form.carList.map(item=>{
            //         return item.id
            //     })
            // }else {
            //     this.form.carIds = [this.form.carId]
            //     this.form.workIds = [this.form.id]
            // }
            this.form.workId = this.form.id


            return new Promise((resolve)=>{
                if('write'==this.state){
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                }else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}
.el-descriptions{
    margin: 0 -15px;
}
</style>
